<template>
	<view class="goods-list-page">
		<u-list
			@scrolltolower="loadMore"
		>
			<u-list-item>
				<view id="navbar">
					<u-navbar
						:placeholder="true"
					>
						<template #left>
							<view class="search-navbar__left">
								<view class="search-navbar__left_icon" @click="tabbarBackClick">
									<u-icon name="arrow-left" size="20"></u-icon>
								</view>
								<view class="search-navbar__left_search">
									<u-search placeholder="请输入关键字搜索" 
									:showAction="false" inputAlign="center" :inputStyle="{'fontSize': '12px', 'width': '170px' , 'height': '28px'}"
									:searchIconSize="18" @search="onSearch"
									v-model="keyword"></u-search>
								</view>
							</view>
						</template>
					</u-navbar>
				</view>
				<view class="goods-list" :style="{paddingTop: sSort ? '108px' : '54px'}" v-if="goodsList.length > 0">
					<view class="goods-list-item" v-for="item in goodsList" :key="item['id']"
						@click="handleGoodsClick(item['id'])">
							<view class="goods-image">
							<image :src="minioUrl + item['images']"></image>
						</view>
						<view class="goods-info">
							<u--text :lines="2" :size="12"
								   :text="item['name']" ></u--text>
							<view class="goods-price">
							<text>到手价</text>
								<u--text :block="true" :text="'￥'+item['lowprice']" :size="16" type="error"></u--text>
							</view>
							<u--text :text="'已售：'+ item['sold']" :size="12" type="info"></u--text>
						</view>
					</view>
				</view>
				<view class="no-data" style="margin-top: 108px;" v-else></view>
			</u-list-item>
		</u-list>
		
		<view class="list-toggle" :style="{top: navTop + 'px'}">
			<u-tabs :list="toggleList" @click="toggleClick" lineColor="#f56c6c" 
					:activeStyle="{color: '#f56c6c'}" :lineWidth="30" :itemStyle="{ width: '200rpx', height: '44px' }"
			>
			</u-tabs>
		</view>
		
		<view class="list-tSort" :style="{top: navTop + 44 + 'px'}" v-if="tSort.length > 0">
			<u-scroll-list :indicator="false">
				<view v-for="item in tSort" :key="item.id" 
					class="list-tSort-item" :style="{color: item.id == chooseTSort ? '#f56c6c' : '#000'}"
					@click="tSortClick(item.id)">
					{{item['name']}}
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {onLoad} from "@dcloudio/uni-app";
	import {getCurrentInstance, onMounted, ref} from "vue";
	
	interface toggleItem {
		name: string,
		value: string
	}
	
	interface ItSort{
		id: number,
		name: string
	}
	
	const { proxy }: any = getCurrentInstance()
	const pageIndex = ref(1)
	const sSort = ref('')
	const goodsList = ref([])
	const showLoading = ref(true)
	const minioUrl = proxy.$minioUrl
	const tSort = ref<ItSort[]>([])
	const chooseTSort = ref(0)
	const keyword = ref('')
	const navTop = ref()
	const toggleType = ref('all')
	const priceType = ref(false)
	const toggleList = ref<toggleItem[]>([
		{
			name: '综合排序',
			value: 'all'
		}, {
			name: '销量',
			value: 'sold'
		}, {
			name: '价格',
			value: 'price'
		}
	])
	
	const tSortClick = (id: number) => {
		chooseTSort.value = id
		pageIndex.value = 1
		goodsList.value = []
		getGoodsList()
	}
	
	const toggleClick = (item: toggleItem) => {
		if(item.value == "price"){
			priceType.value = !priceType.value
			toggleType.value = item.value + (priceType.value ? 'Asc' : 'Desc')
		}else{
			toggleType.value = item.value
		}
		pageIndex.value = 1
		goodsList.value = []
		getGoodsList()
	}
	
	const handleGoodsClick = (id: number) => {
		uni.navigateTo({
			url: '/goods/goods_detail/goods_detail?id=' + id
		})
	}
	
	const tabbarBackClick = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	const onSearch = () => {
		pageIndex.value = 1
		goodsList.value = []
		getGoodsList()
	}
	
	const loadMore = () => {
		if(showLoading.value){
			pageIndex.value += 1
			getGoodsList()
		}
	}
	
	onMounted(()=>{
		getGoodsList()
		const query = uni.createSelectorQuery()
		query.select("#navbar").boundingClientRect(function(rect: any){
		  navTop.value = rect.height
		}).exec()
		if(sSort.value){
			proxy.ajax(proxy.api.getTSort, 'POST', {sSort: Number(sSort.value)}, function(resp: any){
				tSort.value = resp.data.tSort
			})
		}
	})
	
	const getGoodsList = () => {
		let data = {
			page: pageIndex.value,
			length: 6,
			start: (pageIndex.value-1)*6,
			type:  toggleType.value,
			sSort: sSort.value == "" ? null : Number(sSort.value),
			keyWord: keyword.value == "" ? null : keyword.value,
			tSort: chooseTSort.value === 0 ? null : chooseTSort.value
		}
		proxy.ajax(proxy.api.getGoodsList,'POST',data,function (resp: any){
			let list = resp.data.result.list;
			if(list.length > 0){
				for (let i =0;i<list.length;i++){
				let images = JSON.parse(list[i].images)
				list[i].images = images[0]
			}
			if(goodsList.value.length === 0){
				goodsList.value = list
			}else{
					goodsList.value = goodsList.value.concat(list);
				}
			}else{
				showLoading.value = false
			}
		})
	}
	
	onLoad((options)=>{
		sSort.value = options?.sSort
		keyword.value = options?.keyword
	})
</script>

<style lang="scss">
@import "style.scss"
</style>
